import React, {useRef} from 'react';
import styled from 'styled-components';
import {useStores} from '../libs/useStores';
import {Upload, message, Spin} from 'antd';
import {InboxOutlined} from '@ant-design/icons';
import {observer, useLocalStore} from 'mobx-react';
import Tips from './Tips';

const {Dragger} = Upload;

const StyledUploader = styled.main`

`;

const StyledDragger = styled(Dragger)`
    border: 1px dashed #F57C01 !important;
    & svg{
        fill: #F57C01;
    }
`;

const StyledResult = styled.div`
    border: 1px dashed #F57C01;
    margin-top: 20px;
    padding: 20px;
`;

const StyledH1 = styled.h1`
    text-align: center;
`;

const StyledImg = styled.img`
    max-width: 300px;
`;

const StyledInput = styled.input`
    outline: none;
    border: 1px solid #F57C01;
    margin-right: 20px;
`;

const StyledSpin = styled(Spin)`
    & svg {
        fill: #F57C01;
    }
`;

const Uploader:React.FC = observer(() => {

    const {ImageStore, UserInfoStore} = useStores();

    const heightRef = useRef<HTMLInputElement>(null);
    const widthRef = useRef<HTMLInputElement>(null);

    const store = useLocalStore(() => ({
        width: '',
        height: '',
        setWidth(newWidth: string) {
            store.width = newWidth;
        },
        setHeight(newHeight: string) {
            store.height = newHeight;

        },
        get widthStr() {
            return store.width ? `/w/${store.width}` : '';
        },
        get heightStr() {
            return store.height ? `/h/${store.height}` : '';
        },
        get fullStr() {
            return ImageStore.serverFile.attributes.url.attributes.url + '?imageView2/0' + store.widthStr + store.heightStr;
        }
    }));

    const props = {
        showUploadList: false,
        beforeUpload: (file: File) => {

            if (UserInfoStore.currentUser === undefined) {
                message.warning('请先登录!');
                return false;
            }

            if (!/(svg$)|(png$)|(jpg$)|(jpeg$)|(gif$)/ig.test(file.name)) {
                message.error('文件格式不支持!');
                return false;
            }

            ImageStore.setFile(file);
            ImageStore.setFilename(file.name);

            ImageStore.upload()
                .then((serverFile) => {
                    console.log('上传成功!');
                    message.success('上传成功!');
                    console.log(serverFile);
                })
                .catch(error => {
                    console.log(error);
                });
            return false;
        }
    };

    const handleWidthChange = () => {
        if (widthRef !== null && widthRef.current !== null) {
            store.setWidth(widthRef.current.value);
        }
    };

    const handleHeightChange = () => {
        if (heightRef !== null && heightRef.current !== null) {
            store.setHeight(heightRef.current.value);
        }
    };

    return (
        <StyledUploader>
            <Tips>请先登录再上传</Tips>
            <StyledSpin tip="上传中" spinning={ImageStore.isUploading}>
                <StyledDragger {...props}>
                    <p className="ant-upload-drag-icon">
                        <InboxOutlined/>
                    </p>
                    <p className="ant-upload-text">点击选择或直接拖拽上传图片</p>
                    <p className="ant-upload-hint">
                        支持 jpg / jpeg / png / svg / gif，注意隐藏隐私信息
                    </p>
                </StyledDragger>
            </StyledSpin>
            {
                ImageStore.serverFile ?
                    <StyledResult>
                        <StyledH1>上传结果</StyledH1>
                        <dl>
                            <dt>线上地址</dt>
                            <dd><a target="_blank"
                                   rel="noopener noreferrer"
                                   href={ImageStore.serverFile.attributes.url.attributes.url}>{ImageStore.serverFile.attributes.url.attributes.url}</a>
                            </dd>
                            <dt>文件名</dt>
                            <dd>{ImageStore.filename}</dd>
                            <dt>图片预览</dt>
                            <dd><StyledImg src={ImageStore.serverFile.attributes.url.attributes.url}
                                           alt={ImageStore.filename}/></dd>
                            <dt>自定义宽高</dt>
                            <StyledInput type="number" placeholder="输入宽度" ref={widthRef} onChange={handleWidthChange}/>
                            <StyledInput type="number" placeholder="输入高度" ref={heightRef}
                                         onChange={handleHeightChange}/>
                            <dd><a target="_blank"
                                   rel="noopener noreferrer"
                                   href={store.fullStr}>{store.fullStr}</a></dd>
                        </dl>
                    </StyledResult> : null
            }
        </StyledUploader>
    );
});

export default Uploader;